<script setup lang="ts">
import { ref, reactive, nextTick, onMounted } from 'vue'
import { Search, Plus } from '@element-plus/icons-vue'
import svgIcon from '@/components/base-svgIcon/index.vue'
import { url } from 'inspector';

const input = ref()
const listIndex = ref(-1)
const innerDrawer = ref(false)
const textarea = ref()
const elInputRef = ref<any>(null)
const centerBodyRef = ref<any>(null)
const centerContentRef = ref<any>(null)
    
const details = ref()




const imglist = ref([
    { url: '../../../src/assets/images/1.png' },
    { url: '../../../src/assets/images/2.png' },
    { url: '../../../src/assets/images/3.png' }
])

const datalist = ref([
    { url: '../../../src/assets/images/1.png', label: '简简单单', subabel: 'becbb75cccce342b9a31b2cd70', time: '2024/10/10', isqun: false },
    { url: '../../../src/assets/images/2.png', label: '徐骚航-全世界最丑最骚最骚的', subabel: '[视频号]青空律师事务所法官咨询', time: '2024/10/10', isqun: false,chatList:[] },
    { url: '../../../src/assets/images/4.png', label: '徐康乐', subabel: '谁近谁加班啊', time: '2024/10/10', isqun: false,chatList:[
            { url: '../../../src/assets/images/4.png', label: '搬的距离公司近了 唉声叹气的干啥',  pos: 'left' },
            { url: '../../../src/assets/images/4.png', label: '天天可以睡到八点了',  pos: 'left' },
            { url: '../../../src/assets/images/default1.png', label: '但是天天加班呢',  pos: 'right' },
            { url: '../../../src/assets/images/default1.png', label: '你刚下班？',  pos: 'right' },
            { url: '../../../src/assets/images/4.png', label: '你们加班给调休么 还是免费加',  pos: 'left' },
            { url: '../../../src/assets/images/default1.png', label: '我没有加班',  pos: 'right' },
            { url: '../../../src/assets/images/default1.png', label: '就算加班也是也是免费',  pos: 'right' },
            { url: '../../../src/assets/images/4.png', label: '那你昨天说加班',  pos: 'left' },
            { url: '../../../src/assets/images/default1.png', label: '在这住离得近 避免不了加班',  pos: 'right' },
            { url: '../../../src/assets/images/default1.png', label: '谁近谁加班啊 ',  pos: 'right' },
        ] 
    },
    {
        url: '../../../src/assets/images/3.png', label: '济南Android开车群', subabel: '简简单单：？？？', time: '2024/10/10', isqun: true,
        qunList: [
            { url: '../../../src/assets/images/1.png', label: '简简单单', subabel: 'becbb75cccce342b9a31b2cd70', time: '2024/10/10', isqun: false },
            { url: '../../../src/assets/images/2.png', label: '徐骚航-全世界最丑最骚最骚的', subabel: '[视频号]青空律师事务所法官咨询', time: '2024/10/10', isqun: false },
            { url: '../../../src/assets/images/3.png', label: '济南Android开车群', subabel: '简简单单：？？？', time: '2024/10/10', isqun: true, qunList: [] }
        ]
    }
])



nextTick(() => {
    elInputRef.value?.focus();
})

onMounted(()=>{
    // nextTick(() => {
    //     setTimeout(()=>{
    //     centerBodyRef.value.scrollTo({top: centerContentRef.value.scrollHeight, behavior: "smooth" })
    // },1000) 
    // })
    
})

function PlusClick() {
    console.log('PlusClick');

}


const gengduoClick = () => {
    console.log('更多');
    innerDrawer.value =true
}

const itemClick = (val: any) => {
    console.log('val', val);
    details.value = val
    // chathead.value = val.label
}

const handleEnterKey = (val: any) => {
    console.log('val', val,details.value);
    if (details.value) {
        details.value.chatList.push(
            { 
             url: '../../../src/assets/images/default1.png',
             label: textarea.value,  
             pos: 'right' 
            },
        )
    }

    setTimeout(()=>{
        centerBodyRef.value.scrollTo({top: centerContentRef.value.scrollHeight, behavior: "smooth" })
    },100) 
    
   textarea.value = ''
}

const iconClick = (val: string) => {

    switch (val) {
        case 'biaoqing':
            console.log('1');
            break;
        case 'wenjianjia':
            console.log('2');
            break;
        case 'jietu':
            console.log('jietu');
            electron.ipcRenderer.send('jietu')  
            break;
        case 'xiaoxi':
            console.log('4');
            break;
        case 'yinpin':
            console.log('5');
            break;
        case 'shipin':
            console.log('6');
            break;
        default:
            break;
    }
}




</script>

<template>
    <div class="lay dreg">
        <div class="lay_left">
            <div class="seachBox">
                <el-input v-model="input" style="width: 85%;background-color: #eee;color: #eee;" size="small"
                    placeholder="搜索" input-style="" :prefix-icon="Search" />
                <el-icon :size="20" title="发起群聊" style="background-color: #eaeaea;border-radius: 2px;padding: 2px;"
                    @click="PlusClick">
                    <Plus style="color: black;" />
                </el-icon>
            </div>
            <div class="sliderBox">
                <div style="height: 100%;width: 100%;">
                    <div class="ul" v-for="(i, k) in datalist" :key="k" @click="itemClick(i), listIndex = k"
                        :style="{ backgroundColor: listIndex == k ? '#d3d3d3' : '' }">
                        <div class="ul_imgbox" style=" ">
                            <img v-if="!i.isqun" :src="i.url" alt=""
                                style="height: 45px;width: 45px; border-radius: 5px;" />
                            <div v-else class="ulimg">
                                <template v-for="(i, k) in imglist" :key="k">
                                    <el-image
                                        style="width: 17px; height: 17px;margin-right: 0.5px;margin-bottom: 0.5px;"
                                        :src="i.url" fit="cover" />
                                </template>
                            </div>
                        </div>
                        <div style="display: flex;flex-direction: column;width:80%;padding-left: 5px;">
                            <span class="tlt">{{ i.label }}</span>
                            <span class="subtlt">{{ i.subabel }}</span>
                        </div>
                        <div style="position: absolute;top:10px;right: 9px;">
                            <span style="font-size: 10px;color: #b9b9b9;">{{ i.time }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="lay_center" v-if="listIndex != -1">
            <div class="center_head" id="center_head">
                <span style="padding-left: 25px;" v-if="details">{{ details.label }}{{ details.isqun ? '(' +
                    details.qunList.length
                    + ')' : '' }}</span>
                <span style="padding-left: 25px;" v-else></span>
                <span class="iconfont icon-gengduo icon-gengduo-box"  @click="gengduoClick"></span>
            </div>

            <div ref="centerBodyRef" class="center_body" id="center_body">
                <div ref="centerContentRef" style="padding: 10px; width: 100%;">
                    <template v-for="(item,k) in details.chatList" :key="k">
                        <div class="chat_left" v-if="item.pos == 'left'">
                            <img :src="item.url" alt="" style="height: 30px;width: 30px;" />
                            <span class="chat_other">{{ item.label }}</span>
                        </div>
                        <div class="chat_right" v-if="item.pos == 'right'">
                            <span class="chat_me">{{ item.label }}</span>
                            <img :src="item.url" alt="" style="height: 30px;width: 30px;" />
                        </div>
                    </template>
                </div>
                <el-drawer v-model="innerDrawer" direction="rtl" style="position: absolute;" :append-to-body="false"  title="I'm inner Drawer">
               
                </el-drawer>
            </div>
            <div class="center_foot">
                <div class="center_foot_icon">
                    <div>
                        <span class="icon iconfont icon-biaoqing1 center_foot_icon_item"
                            @click="iconClick('biaoqing')"></span>
                        <span class="icon iconfont icon-wenjianjia-kong center_foot_icon_item"
                            @click="iconClick('wenjianjia')"></span>
                        <span class="icon iconfont icon-jietu1 center_foot_icon_item"
                            @click="iconClick('jietu')"></span>
                        <span class="icon iconfont icon-xiaoxi center_foot_icon_item"
                            @click="iconClick('xiaoxi')"></span>
                    </div>
                    <div>
                        <span class="icon iconfont icon-dianhua center_foot_icon_item"
                            @click="iconClick('yinpin')"></span>
                        <span class="icon iconfont icon-video1 center_foot_icon_item"
                            @click="iconClick('shipin')"></span>
                    </div>
                </div>
                <el-input ref="elInputRef" v-model="textarea" :rows="4" input-style="background-color: #f1f1f1;"
                    type="textarea" @keydown.enter="handleEnterKey" />
            </div>
            
        </div>
        <div class="lay_center" v-else>
            <div style="color: black;display: flex;justify-content: center;align-items: center;height: 100%;">
                <div>
                    <span class="icon iconfont icon-weixin1" style="font-size: 80px;color: #eaeaea;"></span>
                </div>
            </div>
        </div>
    </div>
</template>
<style src="./index.scss" scoped></style>

<style scoped></style>
